<template>
  <div class="addBankcard">
    <div class="bankcardList">
      <div class="bankcard_card">
        <ul>
          <li v-for="(item, index) in filterAddress" :class="{'active': index === currentIndexs}" @mouseover="liEnter(index)" @mouseout="liEnterHide(index)">
            <div @click="currentIndex(item, index)">
              <p>{{item.CardUserName}}</p>
              <p>{{item.BankName}}</p>
              <p>{{item.CardNumber}}</p>
              <p class="active" v-show="item.IsDefault"></p>
              <p style="display:none">{{item.UserID}}</p>
            </div>
            <p v-show="deleteShow === index" style="position: absolute; right:5px; bottom:-4px">
              <a class="deleteBanCard" href="javascript:;" @click="deleteBanCard(item.ID)"></a>
            </p>
          </li>
        </ul>
        <div class="more">
          <a v-show="list.length >4" href="javascript:;" @click="loadMore">{{indexMore}}</a>
        </div>
      </div>
      <SwModal :isShow.sync="isShowAddCard" :isShowBg="true" :noText="lang['cancelBth']" :okText="lang['add']" :ok="submitAddCard" :no="cancelAddCard">
        <div class="bankcard_add">
          <ul>
            <h2>{{lang['add bank card']}}</h2>
            <li>
              <label>
                <span>{{lang['name of account holder']}}</span>
              </label>
              <input :placeholder="lang['please name of account holder']" maxlength="50" type="text" v-model='inputs.sname'></li>
            <li>
              <label>
                <span>{{lang['bank name']}}</span>
              </label>
              <input :placeholder="lang['please bank name']" maxlength="50" type="text" v-model='inputs.yhmc'></li>
            <li>
              <label>
                <span>{{lang['bank account']}}</span>
              </label>
              <input :placeholder="lang['please bank account']" v-model='inputs.yhzh' @input="inputsyhzh($event)" maxlength="54" type="text"></li>
            <li>
              <label>
                <span>{{lang['bank Address']}}</span>
              </label>
              <input :placeholder="lang['please bank Address']" maxlength="50" type="text" v-model='inputs.yhdz'></li>
            <li>
              <label>
                <span>SWIFT CODE</span>
              </label>
              <input :placeholder="lang['please swift code']" type="text" maxlength="20" v-model='inputs.swlftcode'></li>
          </ul>
        </div>
      </SwModal>
      <div class="Add_toCad">
        <a href="javascript:;" @click="Addbankcard">{{lang['add bank card']}}</a>
      </div>
      <SwModal :isShow.sync="isShowAssetPassword" :isShowBg="true" :okText="lang['determineBth']" >
        <div class="safety_verification-a">
          <div class="title">
            {{lang['safety verification']}}
            <a class="close_safety" @click="isShowAssetPassword = false">
              <img src=""></a>
          </div>
          <ul>
            <li>
              <p class="text">{{lang['basic_capitalPassword']}}</p>
              <p class="inpu">
                <input type="password" class="paddingL10" name="" :placeholder="lang['pleaseEnterAFundPassword']" v-model="assetPassword" maxlength="20" minlength="8"></p>
            </li>
            <li>
              <button type="button" class="subitmBox" @click="confirmAssetPassword">{{lang['determineBth']}}</button>
              <!-- <router-link to="/safety/mony_certification"></router-link>
            -->
            <a href="javascript:;" style="float:right; margin-top:45px" @click="onClosed">{{lang['longForgetPassword']}}</a>
          </li>
        </ul>
      </div>
    </SwModal>
  </div>
</div>
</template>

<script>
import commonMixins from '@/mixins/common.js'
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
export default {
  mixins: [commonMixins],
  data () {
    return {
      bankcardList: false,
      currentIndexs: 0,
      limitNum: 4,
      adfasdf: false,
      showModal: false,
      isShowAddCard: false,
      isShowAssetPassword: false,
      list: [],
      realNames: '',
      inputs: {
        sname: '',
        yhmc: '',
        yhzh: '',
        yhdz: '',
        swlftcode: ''
      },
      assetPassword: '',
      chikaren: '',
      yinghang: '',
      zhanghao: '',
      tishiyu: '',
      indexMore: '',
      isMore: true,
      deleteShow: ''
    }
  },
  components: {
    SwModal
  },
  watch: {
    langKey () {
      if (this.isMore) {
        this.indexMore = this.lang['indexMore']
      } else {
        this.indexMore = this.lang['packup']
      }
    }
  },
  methods: {
    onClosed () {
      this.isShowAddCard = false
      this.showModal = false
      this.isShowAssetPassword = false
      setTimeout(() => {
        this.$router.push({path: '/safety/mony_certification'})
      }, 300)
    },
    loadMore () {
      if (this.limitNum === 4) {
        this.indexMore = this.lang['packup']
        this.limitNum = this.list.length
        this.isMore = false
      } else {
        this.indexMore = this.lang['indexMore']
        this.limitNum = 4
        this.isMore = true
      }
    },
    inputsyhzh (event) {
      let val = event.target.value.replace(/[\D]/g, '')
      event.target.value = val
      this.inputs.yhzh = val
    },
    liEnter (e) {
      this.deleteShow = e
    },
    liEnterHide (e) {
      this.deleteShow = false
    },
    currentIndex (item = {}, index) {
      this.chikaren = item.CardUserName
      this.yinghang = item.BankName
      this.zhanghao = item.CardNumber
      this.yinghangID = item.ID
      this.currentIndexs = index
      this.adfasdf = true
      this.setmoren(item)
    },
    setmoren (item) {
      this.$host1.post('BankUser/SetDefault', {
        id: item.ID
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
      })
    },
    deleteBanCard (itemID) {
      let confirm = ModalApi.confirm({
        isShowCloseBtn: true,
        modalClass: 'commonModal',
        title: 'prompt message',
        content: 'Confirm Bank Account removal',
        okText: 'delete',
        noText: '',
        isShowBg: true,
        ok: () => {
          this.$host1.post('BankUser/DisableBankCard', {
            id: itemID
          }, {
            modalOptions: {
              modalClass: 'userModal'
            }
          })
          .then((res) => {
            confirm.close()
            this.jiazaiyinghangka()
          })
        },
        no: () => {
          confirm.close()
        }
      })
    },
    Addbankcard () {
      this.inputs.sname = ''
      this.inputs.yhmc = ''
      this.inputs.yhzh = ''
      this.inputs.yhdz = ''
      this.inputs.swlftcode = ''
      this.assetPassword = ''
      this.isShowAddCard = !this.isShowAddCard
      this.inputs.sname = this.mixUserInfo.realName
    },
    confirmAssetPassword () {
      if (this.assetPassword !== '') {
        this.inputs.yhzh.replace(/\s+/g, '')
        this.$host1.post('BankUser/AddCard', {
          BankName: this.inputs.yhmc,
          CardNumber: this.inputs.yhzh,
          CardUserName: this.inputs.sname,
          Branch: this.inputs.yhdz,
          SWIFTCode: this.inputs.swlftcode,
          IsDefault: !this.list || this.list.length <= 0,
          TransactionPassword: this.assetPassword,
          ClientType: 0
        }, {
          modalOptions: {
            modalClass: 'userModal'
          }
        })
        .then((res) => {
          if (res.StatusCode === '200') {
            this.isShowAddCard = false
            this.isShowAssetPassword = false
            this.showModal = true
            this.tishiyu = this.lang['add success']
            this.jiazaiyinghangka()
          }
        })
      } else {
        ModalApi.message(this.lang['pleaseEnterAFundPassword'], null, null, 'userModal')
      }
    },
    cancelAddCard () {
      this.isShowAddCard = false
      this.inputs.sname = ''
      this.inputs.yhmc = ''
      this.inputs.yhzh = ''
      this.inputs.yhdz = ''
      this.inputs.swlftcode = ''
      this.assetPassword = ''
    },
    submitAddCard () {
      let tip = ''
      if (!this.inputs.swlftcode) {
        tip = this.lang['please swift code']
      }
      if (!this.inputs.yhdz) {
        tip = this.lang['please bank Address']
      }
      if (!this.inputs.yhzh) {
        tip = this.lang['add bank card']
      }
      if (!this.inputs.yhmc) {
        tip = this.lang['please bank name']
      }
      if (!this.inputs.sname) {
        tip = this.lang['name of account holder']
      }
      if (tip) {
        ModalApi.message(tip)
        return
      }
      // 弹出资金密码输入框
      this.assetPassword = ''
      this.isShowAssetPassword = true
      // this.tishiyu
    },
    jiazaiyinghangka () {
      this.$host1.post('BankUser/GetBankCardList', {
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        this.list = res.Data || []
        this.list.forEach((v, i) => {
          if (v.IsDefault === true) {
            this.currentIndexs = i
          }
        })
      })
    }
  },
  mounted () {
    this.indexMore = this.lang['indexMore']
    this.jiazaiyinghangka()
  },
  computed: {
    filterAddress: function () {
      return this.list.slice(0, this.limitNum)
    }
  }
}
</script>

<style lang="less">
.addBankcard {
  .paddingL10 {
    padding: 0 10px;
  }

  .more {
    margin-left: 30px;
    line-height: 20px;
    clear: both;
  }

  .more a {
    color: #222;
  }

  .bankcard_card {
    overflow: hidden;
    margin-top: 20px;
  }

  .deleteBanCard {
    // background: url(./images/delete.png) no-repeat center center;
    width: 18px;
    height: 18px;
    display: inline-block;
  }

  .deleteAccount {
    // background: url(./images/delete2.png) no-repeat center center;
    width: 18px;
    height: 18px;
    display: inline-block;
  }

  .bankcard_card ul {
    margin-left: 30px;
  }

  .bankcard_card ul li {
    // background: url(./images/bankcard_background.png) no-repeat;
    width: 277px;
    height: 104px;
    margin-right: 10px;
    margin-bottom: 20px;
    float: left;
    padding: 0 10px;
    box-sizing: border-box;
    line-height: 28px;
    position: relative;
  }

  .bankcard_card ul li.active:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    // background: url(./images/bankcard_select.png) no-repeat;
    position: absolute;
    right: 5px;
    top: 5px;
  }

  .bankcard_card ul li:nth-of-type(2) {
    background-position: -311px 0;
  }

  .bankcard_card ul li:nth-of-type(3) {
    background-position: -622px 0;
  }

  .bankcard_card ul li div p {
    color: #fff;
    padding: 0 20px 0 0;
    font-size: 13px;
  }

  .bankcard_card ul li div {
    cursor: pointer;
    margin-top: 10px;
  }

  .bankcard_card p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
  }

  .bankcard_card p a {
    color: #f2f2f2;
    display: inline-block;
    text-align: center;
  }

  .bankcard_card p a:hover {
    color: #fff;
  }

  .Add_toCad {
    clear: both;
    padding: 35px 0 46px;
  }

  .Add_toCad a {
    display: block;
    width: 200px;
    height: 40px;
    border: solid 1px #999;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    border-radius: 5px;
    margin: 0 auto;
    color: #333;
  }

  .safety_verification-a {
    width: 580px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 36px;
  }

  .safety_verification-a a {
    color: #213763
  }

  .safety_verification-a .title {
    font-size: 16px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    padding: 26px 0 16px;
  }

  .safety_verification-a .title img {
    vertical-align: middle;
    text-align: center;
  }

  .safety_verification-a .title .close_safety {
    float: right;
  }

  .safety_verification-a li .text {
    padding-bottom: 10px;
    padding-top: 30px;
  }

  .safety_verification-a li .inpu {
    position: relative;
  }

  .safety_verification-a li .inpu input {
    box-sizing: border-box;
    padding: 0 10px;
    line-height: 30px;
    height: 48px;
    width: 100%;
    border: solid 1px #d5d5d5;
    border-radius: 5px;
    color: #666;
  }

  .safety_verification-a li .inpu input:hover {
    border: 1px solid #213763;
  }

  .safety_verification-a li .inpu input[disabled='disabled'] {
    background: #fafdff;
    border: solid 1px #213763;
  }

  .safety_verification-a .subitmBox {
    display: inline-block;
    height: 46px;
    border-radius: 5px;
    width: 150px;
    background-color: #213763;
    color: #fff;
    margin: 36px auto;
  }

  .bankcard_add {
    overflow: hidden;
    width: 660px;
    margin: 0 auto;
    margin-top: 40px;
  }

  .bankcard_add li {
    margin-bottom: 40px;
    height: 50px;
  }

  .bankcard_add label {
    width: 110px;
    line-height: 50px;
    height: 50px;
    text-align: right;
    padding-right: 20px;
    display: inline-block;
    float: left;
  }

  .bankcard_add label span {
    display: inline-block;
    line-height: 25px;
    font-size: 12px;
  }

  .bankcard_add input {
    float: left;
    width: 465px;
    text-align: left;
    text-indent: 5px;
    border: solid 1px #999;
    height: 48px;
    border-radius: 4px;
  }

  .bankcard_add .sumbitBox {
    width: 200px;
    height: 30px;
    line-height: 30px;
    background: #3559a0;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    display: block;
    margin: 0 auto;
  }

  .bankcard_add h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 16px;
  }
}

</style>
